import React, { Component } from 'react'
import { NavBar, Icon, SearchBar } from 'antd-mobile';
import './SearchCenter.scss'
import {withRouter} from 'react-router-dom'
import myaxios from '../../utils/myaxios'
 class SearchCenter extends Component {
  state = {
    inputVal: '',
    productList: []
  }
  getProductList = (params) => {
    // https://www.linweiqin.cn/api/public/v1/goods/qsearch
    if(this.state.inputVal){
      myaxios.get('/goods/qsearch', {
        params: {
          query: this.state.inputVal
        }
      }).then(res => {
        this.setState({
          productList: res
        })
      })
    }else{
      alert("输入不能为空")
    }
  }
  handleItemClick = (e) => {
    let good_id = e.target.getAttribute('data-goods_id')
    this.props.history.push('/goodDetail/'+good_id)
  }
  
  render() {
    return (
      <div className='yg-sc'>
        <NavBar
          mode="light"
          className='yg-sc-nav'
          icon={<Icon type="left" />}
          onLeftClick={() => window.history.go(-1)}>
          搜索中心
        </NavBar>
        {/* 搜索中心输入框开始 */}
        <SearchBar
          value={this.state.inputVal}
          className='yg-sc-search'
          placeholder="Search"
          // 是键盘按下enter键触发的
          // onSubmit={value => {
          //   console.log(value, 'onSubmit')
          // }}
          // 清除输入内容时触发的
          // onClear={value => console.log(value, 'onClear')}
          // 聚焦的时候触发
          // onFocus={() => console.log('onFocus')}
          // 失焦触发
          // onBlur={() => console.log('onBlur')}
          onCancel={() => this.getProductList()}
          showCancelButton
          // 内容改变触发
          onChange={(value) => {
            this.setState({
              inputVal: value
            })
          }}
          cancelText='搜索'
        />
        {/* 搜索中心输入框结束 */}
        {/* 产品列表开始 */}
        <div className="yg-sc-list" onClick={this.handleItemClick}>
          {this.state.productList.map(v=>{
            return <div data-goods_id={v.goods_id} key={v.goods_id} className="sc-list-item">
              {v.goods_name}
            </div>
          })}
        </div>
        {/* 产品列表结束 */}
      </div>
    )
  }
}

export default withRouter(SearchCenter)